<template>
  <div>
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" center  :visible="open" :modal="open" @close="close()" width="60%" :close-on-click-modal="false">
      <ht-form
        ref="editForm"
        defaultEventKey="configInfo"
        :rowNum="1"
        :open="open"
        :rowData="editForm"
        :dictMap="dictMap"
        :labelWidth="labelWidth"
        :formDiarules="rules"
        :formListOptions="formItemList"
        @isParentFn="isParentFn"
      />

      <!--            <el-form ref="form" :model="form" :rules="rules" label-width="120px">-->
      <!--                <el-form-item label="参数编码" prop="paramCode">-->
      <!--                    <el-input v-model="form.paramCode" placeholder="请输入参数编码"/>-->
      <!--                </el-form-item>-->

      <!--                <el-form-item label="参数名称" prop="paramName">-->
      <!--                    <el-input v-model="form.paramName" placeholder="请输入参数名称"/>-->
      <!--                </el-form-item>-->

      <!--                <el-form-item label="父表" prop="parentTable">-->
      <!--                    <el-select v-model="form.parentTable" placeholder="请选择父表">-->
      <!--                        <el-option v-for="parentTableItem in parentTableEnums" :key="parentTableItem.value" :label="parentTableItem.text" :value="parentTableItem.value">{{ parentTableItem.text }}</el-option>-->
      <!--                    </el-select>-->
      <!--                </el-form-item>-->

      <!--                <el-form-item label="控件类型" prop="componentType">-->
      <!--                    <el-select v-model="form.componentType" placeholder="请选择控件类型">-->
      <!--                        <el-option v-for="componentTypeItem in componentTypeEnums" :key="componentTypeItem.value" :label="componentTypeItem.text" :value="componentTypeItem.value">{{ componentTypeItem.text }}</el-option>-->
      <!--                    </el-select>-->
      <!--                </el-form-item>-->

      <!--                <el-form-item label="字典类型" prop="dictCode" v-if="form.componentType == 3 || form.componentType == 4">-->
      <!--                  <el-input v-model="form.dictCode" placeholder="请输入字典类型"/>-->
      <!--                </el-form-item>-->

      <!--                <el-form-item label="是否展示" prop="isTableShow">-->
      <!--                  <el-radio-group v-model="form.isTableShow" placeholder="请选择是否展示">-->
      <!--                    <el-radio v-for="isTableShowItem in isTableShowEnums" :label="isTableShowItem.value">{{ isTableShowItem.text }}</el-radio>-->
      <!--                  </el-radio-group>-->
      <!--                </el-form-item>-->

      <!--                <el-form-item label="是否查询" prop="isSearch">-->
      <!--                  <el-radio-group v-model="form.isSearch" placeholder="请选择是否查询">-->
      <!--                    <el-radio v-for="isSearchItem in isSearchEnums" :label="isSearchItem.value">{{ isSearchItem.text }}</el-radio>-->
      <!--                  </el-radio-group>-->
      <!--                </el-form-item>-->

      <!--            </el-form>-->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dialogMixin } from "@/libs/dialogMixin";
import {
  addExpandConfInfo,
  checkParamCode,
  findExpandConfInfoById,
} from "@/api/authority_app/expandConfInfo/expandConfInfo";
export default {
  name: "add",
  mixins: [dialogMixin],
  data() {
    // 表单校验
    let checkParamCodeUnique = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("参数编码不能为空"));
      } else {
        checkParamCode({
          id: this.editForm.id,
          paramCode: value,
        }).then((response) => {
          var result = response.result;
          if (!result) {
            callback(new Error("参数编码已经存在"));
          } else {
            callback();
          }
        });
      }
    };
    return {
      labelWidth: "120px",
      formItemList: [
        {
          type: "input",
          prop: "paramCode",
          defaultAttr: {
            label: "参数编码",
            placeholder: "请输入参数编码",
          },
        },
        {
          type: "input",
          prop: "paramName",
          defaultAttr: {
            label: "参数名称",
            placeholder: "请输入参数名称",
          },
        },
        {
          type: "dict",
          dict: "parent_table_type",
          prop: "parentTable",
          selectOptionList: [],
          defaultAttr: {
            disCleanable: true,
            label: "父表",
            placeholder: "请选择父表",
          },
        },
        {
          type: "dict",
          dict: "expand_compment_type",
          prop: "componentType",
          selectOptionList: [],
          defaultAttr: {
            disCleanable: true,
            label: "控件类型",
            placeholder: "请选择控件类型",
          },
          linkedRules: [
            {
              ruleType: "setAttributeByParent",
              childName: "dictCode",
              attributeName: "isHide",
              rule: {
                3: false,
                4: false,
                default: true,
              },
            },
          ],
        },
        {
          type: "textarea",
          prop: "extension",
          defaultAttr: {
            label: "扩展属性",
            placeholder: "请输入扩展属性(JSON)",
          },
        },
        {
          type: "input",
          prop: "dictCode",
          defaultAttr: {
            label: "字典类型",
            placeholder: "请输入字典类型",
          },
        },
        {
          type: "dict",
          dict: "sys_yes_no",
          prop: "isTableShow",
          selectOptionList: [],
          defaultAttr: {
            disCleanable: true,
            label: "是否展示",
            placeholder: "请选择是否展示",
          },
        },
        {
          type: "dict",
          dict: "sys_yes_no",
          prop: "isSearch",
          selectOptionList: [],
          defaultAttr: {
            disCleanable: true,
            label: "是否查询",
            placeholder: "请选择是否查询",
          },
        },
      ],
      parentTableEnums: [],
      componentTypeEnums: [],
      isTableShowEnums: [],
      isSearchEnums: [],
      // 表单校验
      rules: {
        paramCode: [
          { min: 1, max: 64, message: "长度为1~64", trigger: "blur" },
          { required: true, trigger: "blur", validator: checkParamCodeUnique },
        ],
        paramName: [
          { min: 1, max: 100, message: "长度为1~100", trigger: "blur" },
          { required: true, message: "参数名称不能为空", trigger: "blur" },
        ],
        parentTable: [{ required: true, message: "父表不能为空", trigger: "blur" }],
        componentType: [{ required: true, message: "控件类型不能为空", trigger: "blur" }],
        dictCode: [{ min: 1, max: 64, message: "长度为1~64", trigger: "blur" }],
        isTableShow: [{ required: true, message: "是否展示条件不能为空", trigger: "blur" }],
        isSearch: [{ required: true, message: "是否查询条件不能为空", trigger: "blur" }],
        createTime: [
          { min: 1, max: 19, message: "长度为1~19", trigger: "blur" },
          { required: true, message: "创建时间不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.loadDicts(["parent_table_type", "expand_compment_type", "sys_yes_no"]);
  },
  methods: {
    show(id = "") {
      this.id = id;
      this.$set(this, "editForm", {});
      if (id) {
        findExpandConfInfoById(id).then((res) => {
          this.$set(this, "editForm", res.result);
          this.editForm.parentTable = `${this.editForm.parentTable}`;
          this.editForm.isSearch = `${this.editForm.isSearch}`;
          this.editForm.isTableShow = `${this.editForm.isTableShow}`;
          this.editForm.componentType = `${this.editForm.componentType}`;
          this.open = true;
          this.title = "修改";
        });
      } else {
        this.$set(this.editForm, "id", id);
        this.open = true;
        this.title = "新增";
      }
    },
    isParentFn(formData) {
      formData.id = this.id;
      delete formData.createTime;
      delete formData.updateTime;
      if (formData.extension) {
        try {
          let extensionJson = JSON.parse(formData.extension);
        } catch (e) {
          this.msgError("扩展属性必须是JSON格式");
          return false;
        }
      }
      if (formData.id) {
        addExpandConfInfo(formData).then((res) => {
          this.msgSuccess("修改成功");
          this.close(true);
        });
      } else {
        addExpandConfInfo(formData).then((res) => {
          this.msgSuccess("新增成功");
          this.close(true);
        });
      }
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.editForm.sonData();
    },
  },
};
</script>
